<template>
  <a-table :columns="columns" :dataSource="datasource" :rowKey="record => record.id" :pagination="false" >
    <template slot="dbFieldName" slot-scope="text,record,index">
      <a-input :value="record.dbFieldName" style="width: 100%" @change="(e) => handleChangeInput(e.target.value,record,'dbFieldName')"></a-input>
    </template>
    <template slot="dbFieldTxt" slot-scope="text,record,index">
      <a-input :value="record.dbFieldTxt" style="width: 100%" @change="(e) => handleChangeInput(e.target.value,record,'dbFieldTxt')"></a-input>
    </template>
    <template slot="dbLength" slot-scope="text,record,index">
      <a-input-number :value="record.dbLength" style="width: 100%" @change="(e) => handleChangeInput(e,record,'dbLength')"></a-input-number>
    </template>
    <template slot="dbPointLength" slot-scope="text,record,index">
      <a-input-number :value="record.dbPointLength" style="width: 100%" @change="(e) => handleChangeInput(e,record,'dbPointLength')"></a-input-number>
    </template>
    <template slot="dbDefaultVal" slot-scope="text,record,index">
      <a-input-number :value="record.dbDefaultVal" style="width: 100%" @change="(e) => handleChangeInput(e,record,'dbDefaultVal')"></a-input-number>
    </template>
    <template slot="dbType" slot-scope="text,record,index">
      <a-select :value="record.dbType" :options="dbType" style="width: 100%" @change="(e) => handleChangeSelect(e,record,'dbType')"></a-select>
    </template>
    <template slot="dbIsKey" slot-scope="text,record,index">
      <a-checkbox :checked="record.dbIsKey" style="width: 100%" @change="(e) => handleChangeSelect(e.target.value,record,'dbIsKey')"></a-checkbox>
    </template>
    <template slot="dbIsNull" slot-scope="text,record,index">
      <a-checkbox :checked="record.dbIsNull" style="width: 100%" @change="(e) => handleChangeSelect(e.target.value,record,'dbIsNull')"></a-checkbox>
    </template>
  </a-table>
</template>

<script>
const dbType = [
  {
    label: 'String',
    value: 'string'
  }
]
export default {
  name: 'DatabaseProps',
  props: {
    datasource: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      dbType,
      columns: [
        { title: '#', dataIndex: 'id', width: '50px' },
        { title: '字段名称', dataIndex: 'dbFieldName', scopedSlots: { customRender: 'dbFieldName' }, width: '100px' },
        { title: '字段备注', dataIndex: 'dbFieldTxt', scopedSlots: { customRender: 'dbFieldTxt' }, width: '100px' },
        { title: '字段长度', dataIndex: 'dbLength', scopedSlots: { customRender: 'dbLength' }, width: '100px' },
        { title: '小数点', dataIndex: 'dbPointLength', scopedSlots: { customRender: 'dbPointLength' }, width: '100px' },
        { title: '默认值', dataIndex: 'dbDefaultVal', scopedSlots: { customRender: 'dbDefaultVal' }, width: '100px' },
        { title: '字段类型', dataIndex: 'dbType', scopedSlots: { customRender: 'dbType' }, width: '100px' },
        { title: '主键', dataIndex: 'dbIsKey', scopedSlots: { customRender: 'dbIsKey' }, width: '100px' },
        { title: '允许空值', dataIndex: 'dbIsNull', scopedSlots: { customRender: 'dbIsNull' }, width: '100px' }
      ]
    }
  },
  methods: {
    handleChangeInput (value, record, prop) {
      const newData = this.datasource.filter(item => item.id === record.id)[0]
      newData[prop] = value
    },
    handleChangeSelect (value, record, prop) {
      const newData = this.datasource.filter(item => item.id === record.id)[0]
      newData[prop] = value
    },
    handleChangeCheck (value, record, prop) {
      const newData = this.datasource.filter(item => item.id === record.id)[0]
      newData[prop] = value
    }
  }
}
</script>

<style scoped>

</style>
